<template>
  <div class="container">
    <el-card class="box-card">
      <!-- 顶部提示 -->
      <el-row type="flex" justify="space-between">
        <span class="text">说明：目前支持学科和关键字条件筛选</span>
        <el-button type="success" size="small" icon="el-icon-edit">新增试题</el-button>
      </el-row>
      <!-- / 顶部提示 -->
      <!-- 顶部搜索表单 -->
      <el-form label-width="80px">
        <el-row>
          <!-- 学科 -->
          <el-col :span="6">
            <el-form-item label="学科">
              <el-select style="width: 100%" placeholder="请选择">
                <el-options v-for="item in subjects" :key="item.id" :label="item.subjectName" :value="item.id"></el-options>
              </el-select>
            </el-form-item>
          </el-col>
          <!-- 二级目录 -->
          <el-col :span="6">
            <el-form-item label="二级目录">
              <el-select style="width: 100%" placeholder="请选择"> </el-select>
            </el-form-item>
          </el-col>
          <!-- 标签 -->
          <el-col :span="6">
            <el-form-item label="标签">
              <el-select style="width: 100%" placeholder="请选择"> </el-select>
            </el-form-item>
          </el-col>
          <!-- 关键字 -->
          <el-col :span="6">
            <el-form-item label="关键字">
              <el-input placeholder="根据题干搜索"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <!-- 试题类型 -->
        <el-row>
          <el-col :span="6">
            <el-form-item label="试题类型">
              <el-select style="width: 100%" placeholder="请选择"> </el-select>
            </el-form-item>
          </el-col>
          <!-- 难度 -->
          <el-col :span="6">
            <el-form-item label="难度">
              <el-select style="width: 100%" placeholder="请选择"> </el-select>
            </el-form-item>
          </el-col>
          <!-- 方向 -->
          <el-col :span="6">
            <el-form-item label="方向">
              <el-select style="width: 100%" placeholder="请选择"> </el-select>
            </el-form-item>
          </el-col>
          <!-- 录入人 -->
          <el-col :span="6">
            <el-form-item label="录入人">
              <el-select style="width: 100%" placeholder="请选择"> </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <!-- 标题备注 -->
          <el-col :span="6">
            <el-form-item label="标题备注">
              <el-input></el-input>
            </el-form-item>
          </el-col>
          <!-- 企业简称 -->
          <el-col :span="6">
            <el-form-item label="企业简称">
              <el-input></el-input>
            </el-form-item>
          </el-col>
          <!-- 城市 -->
          <el-col :span="6">
            <el-form-item label="企业简称">
              <el-select class="city1" placeholder="请选择"></el-select>
              <el-select class="city2" placeholder="请选择"></el-select>
            </el-form-item>
          </el-col>
          <!-- 按钮 -->
          <el-col :span="6" style="text-align: right">
            <el-button size="small">清除</el-button>
            <el-button size="small" type="primary"> 搜索</el-button>
          </el-col>
        </el-row>
      </el-form>
      <!-- /顶部搜索表单 -->
      <!-- 消息提示框 -->
      <template>
        <el-alert title="数据一共 10 条" type="info" show-icon :closable="false"> </el-alert>
      </template>
      <!-- /消息提示框 -->
      <!-- 表格区域 -->
      <template>
        <el-table :data="tableData" style="width: 100%">
          <el-table-column prop="number" label="试题编号" width="180"> </el-table-column>
          <el-table-column prop="subjectID" label="学科" width="180"> </el-table-column>
          <el-table-column prop="catalogID" label="目录"> </el-table-column>
          <el-table-column prop="questionType" label="题型"> </el-table-column>
          <el-table-column prop="question" label="题干"> </el-table-column>
          <el-table-column prop="addDate" label="录入时间"> </el-table-column>
          <el-table-column prop="difficulty" label="难度"> </el-table-column>
          <el-table-column prop="creator" label="录入人"> </el-table-column>
          <el-table-column label="操作"> </el-table-column>
        </el-table>
      </template>
      <!-- 分页功能 -->
      <el-pagination
        style="text-align: right; margin-bottom: 15px"
        background
        :page-sizes="[5, 10, 15, 20]"
        page-size="5条/每页"
        layout="prev, pager, next, sizes, jumper"
        :total="20"
      >
      </el-pagination>
      <!-- /分页功能 -->

      <!-- /表格区域 -->
    </el-card>
  </div>
</template>

<script>
import { list } from '@/api/hmmm/subjects.js'
export default {
  data() {
    return {
      tableData: [],
      subjects: [], // 学科列表
      query: {
        page: 1, // 当前页数
        pagesize: 10, // 每页显示多少  /** */
        subjectID: null, // 学科
        difficulty: null, // 难度
        questionType: null, // 试题难度
        tags: null, // 标签名称
        province: null, // 企业所在地省份
        city: null, // 企业所在城市
        keyword: null, // 关键字
        remarks: null, // 题目备注
        shortName: null, // 企业简称
        direction: null, // 方向
        creatorID: null, // 录入人
        catalogID: null // 目录
      }
    }
  },
  created() {
    this.getSelects()
  },
  methods: {
    async getSelects() {
      try {
        const { data } = await list({ page: 1, pagesize: 10 })
        this.subjects = data.items
      } catch (err) {
        console.log(err)
      }
    }
  }
}
</script>

<style scoped>
.el-card {
  margin: 10px;
}
.el-button {
  margin-bottom: 15px;
}
.el-table {
  margin-bottom: 15px;
}
.el-alert {
  margin-bottom: 15px;
}
.text {
  font-size: 12px;
  color: pink;
}
.city1 {
  width: 45%;
  margin-right: 5%;
}
.city2 {
  width: 50%;
}
</style>
